<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <meta name="Description" content="随时掌握飞行动态">
    <div style="display:none"><img src="/images/product-promotion/product-promotion-poster.png"></div>
    <title>飞马云播-多旋翼</title>

    <link href="/css/vendor/common.css" type="text/css" rel="stylesheet">
    <link href="/css/vendor/cloud-play-phone-rotor.less" type="text/css" rel="stylesheet/less">
    <script src="/js/less.min.js"></script>
</head>

<body>
<main>
    <!-- 地图 -->
    <div class="map-wrap">
        <div id="map-container"></div>
    </div>

    <!-- 标题 -->
    <div class="title-bar">
        <p class="info">
            <span id="project-plane-type">

            </span>

            <span id="mission-status"></span>
        </p>
        <div class="more-btn" onClick="cloudPlayMobileRotorM.clickMoreInfo()"></div>
    </div>

    <!-- 状态栏 -->
    <div class="status-bar">
        <div id="drone-mode" class="mode-wrap">
            <div class="drone-mode-icon"></div><p class="drone-mode">WP</p>
        </div>
        <div class="gps-wrap">
            <img id="gps-status-icon" class="status-icon" src="/images/cloudplay/mobile_asset/gps_normal.png">
            <div class="signal-wrap">
                <img id="gps-signal-icon" class="signal-icon" src="/images/cloudplay/mobile_asset/signal_5.png">
                <div id="gps-signal-sup" class="signal-sup">0</div>
            </div>
        </div>
        <div id="drone-remote-control" class="remote-control-wrap">
            <img id="remote-status-icon" class="status-icon" src="/images/cloudplay/mobile_asset/remote_normal.png">
            <div class="signal-wrap">
                <img id="remote-signal-icon" class="signal-icon" src="/images/cloudplay/mobile_asset/signal_5.png">
            </div>
        </div>
        <div class="hd-wrap">
            <img id="hd-status-icon" class="status-icon" src="/images/cloudplay/mobile_asset/hd_normal.png">
            <div class="signal-wrap">
                <img id="hd-signal-icon" class="signal-icon" src="/images/cloudplay/mobile_asset/signal_5.png">
                <div id="hd-signal-sup" class="signal-sup">2.4G</div>
            </div>
        </div>
        <div class="drone-battery-wrap">
            <img id="drone-battery-status-icon" class="status-icon" src="/images/cloudplay/mobile_asset/drone_battery_normal.png">
            <div class="signal-wrap">
                <div id="drone-battery-percent" class="signal-percent">100%</div>
            </div>
        </div>
        <div id="ipad-battery-percent-icon" class="ipad-battery-wrap">
            <img id="ipad-battery-status-icon" class="status-icon" src="/images/cloudplay/mobile_asset/ipad_battery_normal.png">
            <div class="signal-wrap">
                <div id="ipad-battery-percent" class="signal-percent">100%</div>
            </div>
        </div>
    </div>
    <!-- 底部信息栏 -->
    <div class="bottom-info-wrap">
        <!-- 信息栏 -->
        <div class="info-bar">
            <div class="info-wrap-1">
                <div class="location-wrap">
                    <img class="location-icon" src="/images/cloudplay/mobile_asset/drone_to_pilot_distance.png">
                    <span id="drone-pilot-distance" class="location-param"></span>
                </div>
                <div class="location-wrap">
                    <span class="location-title">纬度:</span>
                    <span id="drone-position-lat" class="location-param"></span>
                </div>
                <div class="location-wrap">
                    <span class="location-title">经度:</span>
                    <span id="drone-position-lon" class="location-param"></span>
                </div>
            </div>
            <div class="info-wrap-2">
                <div class="info-wrap-2-1">
                    <div class="attitude-plate"></div>
                    <div id="attitude-direction" class="attitude-direction"></div>
                </div>
                <div class="info-wrap-2-2">
                    <table cellpadding="3" cellspacing="0">
                        <tr>
                            <td class="target-param">
                                <p class="name">目标空速</p>
                                <p class="value"><span id="target-speed">0</span>m/s</p>
                            </td>
                            <td class="speed">速度</td>
                            <td class="current-speed"><span
                                        id="drone-speed">0</span></td>
                        </tr>
                        <tr>
                            <td class="target-param">
                                <p class="name">目标高度</p>
                                <p class="value"><span id="target-height">0</span>m</p>
                            </td>
                            <td class="height">高度</td>
                            <td class="current-height"><span id="drone-height">0</span></td>
                        </tr>
                    </table>
                </div>
                <div class="info-wrap-2-3">
                    <table cellpadding="2" cellspacing="0">
                        {#<tr>#}
                            {#<td class="name">风速</td>#}
                            {#<td class="value"><span>3</span>m/s</td>#}
                        {#</tr>#}
                        <tr>
                            <td class="name">里程</td>
                            <td class="value"><span id="flight-miles">0</span>km</td>
                        </tr>
                        <tr>
                            <td class="name">航时</td>
                            <td id="flight-duration" class="value">0:00:00</td>
                        </tr>
                        <tr>
                            <td class="name">航点</td>
                            <td class="value">
                                <span id="finished-point-count">0</span>
                                /
                                <span id="total-point-count">0</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="name">照片</td>
                            <td id="photo-count" class="value">0</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <!-- 播放栏 -->
        <div class="play-bar" id="progress-play-bar" >
            <div id="play-or-pause-button" onClick="clickPlayOrPause()"></div>
            <div class="play-progress-container">
                <div id="play-progress-track">
                    <p id="play-progress-cursor">62:13</p>
                </div>
                <div id="play-progress-thumb"></div>
                <div id="play-progress-touch-layer"></div>
            </div>
            <p id="play-progress-duration">83:32</p>
        </div>
    </div>
</main>
<div id="more-info-wrap">
    <div class="center-content">

        <div class="item-wrap">
            <h1>用户信息</h1>
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <th>用户昵称</th><td><?= $flightMission['nickname'] ?></td>
                    <th>&nbsp;</th><td></td>
                </tr>
                <tr>
                    <th>用户手机号</th><td><?= $flightMission['phone'] ?></td>
                    <th>&nbsp;</th><td>&nbsp;</td>
                </tr>
            </table>

            <div class="item-wrap">
                <h1><?= $flightMission['survey_area_name'] ?></h1>
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <th>飞机型号</th><td id="info-drone-type"></td>
                        <th>&nbsp;</th><td>&nbsp;</td>
                    </tr>
                    <tr>
                        <th>相机类型</th><td id="info-camera-type"><?= $flightMission['camera_type'] ?></td>
                        <th>&nbsp;</th><td>&nbsp;</td>
                    </tr>
                    <tr>
                        <th>GSD</th><td><span id="info-gsd"><?= $flightMission['average_ground_resolution'] ?></span>cm</td>
                        <th>比例尺</th><td><?= $flightMission['work_scale'] ?></td>
                    </tr>
                    <tr>
                        <th>航向重叠</th><td><?= $flightMission['longitudinal_overlap'] ?>%</td>
                        <th>旁向重叠</th><td><?= $flightMission['lateral_overlap'] ?>%</td>
                    </tr>
                    <tr>
                        <th>海拔高度</th><td><?= $flightMission['flight_altitude'] ?>m</td>
                        <th>飞行高度</th><td><?= $flightMission['flight_relative_altitude'] ?>m</td>
                    </tr>
                    <tr>
                        <th>航线间距</th><td><?= $flightMission['flight_interval'] ?>m</td>
                        <th>拍照间距</th><td><?= $flightMission['take_pic_interval'] ?>m</td>
                    </tr>
                    <tr>
                        <th>默认空速</th><td><?= $flightMission['default_air_speed'] ?>m/s</td>
                        <th>预计时间</th><td><?= $flightMission['work_time'] ?>min</td>
                    </tr>
                    <tr>
                        <th>任务面积</th><td><?= $flightMission['work_area'] ?>km²</td>
                        <th>预计里程</th><td id="info-estimated-miles"><?php echo number_format($taskInfo['total_mileage'],1) ?>km</td>
                    </tr>
                </table>
            </div>
            <div class="item-wrap">
                <h1>飞行信息</h1>
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <th>飞行日期</th><td><?= date('Y-m-d', strtotime($flightMission['created_at'])) ?></td>
                        <th>航线起点</th><td><?= $flightMission['home_lat'] ?></td>
                    </tr>
                    <tr>
                        <th>开始时间</th><td><?= date('H:i:s', strtotime($uasInfo[0]['created_at'])) ?></td>
                        <th>&nbsp;</th><td><?= $flightMission['home_lng'] ?></td>
                    </tr>
                    <tr>
                        <th>结束时间</th><td><?= isset($uasInfo[1]) ? date('H:i:s', strtotime($uasInfo[1]['created_at'])) : '------'; ?></td>
                        <th>降落位置</th><td><?= $flightMission['home_lat'] ?></td>
                    </tr>
                    <tr>
                        <th>实际用时</th><td><?php
                    if (isset($uasInfo[1])) {
                        $times = strtotime($uasInfo[1]['created_at']) - strtotime($uasInfo[0]['created_at']);

                        $h = floor($times / 3600);
                        $times = $times % 3600;
                        $i = floor($times / 60);
                        $s = $times % 60;

                        $h = $h < 0 ? "0" . $h : $h;
                        $i = $i < 0 ? "0" . $i : $i;
                        $s = $s < 0 ? "0" . $s : $s;

                        echo "$h:$i:$s";
                    } else {
                        echo '------';
                    }
                    ?>min</td>
                        <th>&nbsp;</th><td><?= $flightMission['home_lng'] ?></td>
                    </tr>
                    <tr>
                        <th>实际飞行</th><td><?php
                    if (isset($uasInfo[1])) {
                        echo($uasInfo[1]['uas_odometer_value'] - $uasInfo[0]['uas_odometer_value']);
                    } else {
                        echo '------';
                    }
                    ?>km</td>
                        {#<th>降落方式</th><td><?= $flightMission['landing_method'] == 0 ? '伞降' : '滑降' ?></td>#}
                    </tr>
                    <tr>
                        <th>实际拍照</th><td><?= empty($taskInfo['photo_count']) ? '-' : $taskInfo['photo_count']; ?>张</td>
                        <th>&nbsp;</th><td>&nbsp;</td>
                    </tr>
                </table>
            </div>
            <div class="item-wrap">
                <h1>飞机信息</h1>
                <table class="single-row" cellpadding="0" cellspacing="0">
                    <tr>
                        <th>飞机编号</th><td><?= empty($planeInfo) ? '------' : $planeInfo['uas_serial_id'] ?></td>
                    </tr>
                    <tr>
                        <th>持有单位</th><td><?= $planeInfo['name'] ?></td>
                    </tr>
                    <tr>
                        <th>累计飞行</th><td><?= $lastUas['uas_odometer_value'] ?>km</td>
                    </tr>
                    <tr>
                        <th>钥匙编号</th><td><?= empty($keyInfo) ? '------' : $keyInfo['key_id'] ?></td>
                    </tr>
                    <tr>
                        <th>钥匙有效期</th><td><?php if (!empty($plane)) {
                        echo $plane['type'] == 0 ? '永久' : $plane['expired_at'];
                    } else {
                        echo '------';
                    }
                    ?></td>
                    </tr>

                </table>
            </div>
        </div>

    </div>
</div>
<div style="display: none">
    <ul id="packages">
        <?php foreach ($packages as $package): ?>
        <li><?php echo $package ?></li>
        <?php endforeach; ?>
    </ul>
    <div id="endTime">
        <?php echo $endTime ?>
    </div>
    <div id="startTime">
        <?php echo $startTime ?>
    </div>
    <div id="curEndTime">
        <?php echo $curEndTime ?>
    </div>
    <div id="pageTotal">
        <?php echo $pageTotal ?>
    </div>
    <div id="survey_average_altitude">
        <?php echo $flightMission['survey_average_altitude']; ?>
    </div>
    <div id="flight_relative_altitude">
        <?php echo $flightMission['flight_relative_altitude'] ?>
    </div>
    <div id="flightMissionInfo">
        <?php echo $flightMissionInfo ?>
    </div>
    <div id="playType"><?php echo $playType; ?></div>
    <input type="hidden" id="socket" value="<?= $socket ?>">
    <div id="correct_gps"><?= $needCorrect ?></div>
    <div id="planeWayCS"><?= $planeWayCS ?></div>
    <div id="locationCS"><?= $locationCS ?></div>

</div>
</body>
<script src="/js/baidu-statistics.js"></script>
<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/js/vendor/common.js"></script>
<script type="text/javascript" src="/js/vendor/cmp-controls.js"></script>
<script type="text/javascript" src="/js/vendor/cloudplay/cloud-play-mobile-wing.js"></script>
{% include 'template/baseMap.volt' %}{% include 'template/baseMapKey.volt' %}
<script type="text/javascript" src="/js/vendor/transform.js"></script>
<script type="text/javascript" src="/js/vendor/cloudplay/cloud-play-common.js"></script>
<script src="/js/platform-system.js"></script>
<script src="/js/vendor/cloud-play-bar-mobile.js"></script>
<script type="text/javascript" src="/js/vendor/cloudplay/cloud-play-mobile-rotor.js"></script>

<script type="text/javascript" src="/js/vendor/cloudplay/cloud-play-mobile-detail.js"></script>
<script>
    cloudPlayBarMobileM.playProgressChangedCallback = function(progress) {

        FMPlayerObject.onTouchProgressChanged(progress);
    };
    // 点击了播放/暂停按钮
    function clickPlayOrPause() {
        // 设置播放状态 ture为播放状态 false为暂停状态
        var isPlayState = FMPlayerObject.isPlaying;
        cloudPlayBarMobileM.setToPlayState(!isPlayState);
        FMPlayerObject.isPlaying = !isPlayState;

    }
</script>
</html>